<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform多属性变化</title>
    <style>
        #test {
            --scale: 1; /*定义缩放系数*/
            --rotate: 0deg; /*定义2D旋转角度*/
            --rotateX: 0deg; /*定义3D X轴旋转角度*/
            --rotateY: 0deg; /*定义3D Y轴旋转角度*/
            --rotateZ: 0deg; /*定义3D Z轴旋转角度*/
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 50px;
            height: 50px;
            background-color: #0c60ee;
            transform: scale(var(--scale)) rotate(var(--rotate)) rotateX(var(--rotateX)) rotateY(var(--rotateY)) rotateZ(var(--rotateZ));
        }

        /*#test_ {*/
            /*position: absolute;*/
            /*left: 0;*/
            /*right: 0;*/
            /*top: 0;*/
            /*bottom: 0;*/
            /*margin: auto;*/
            /*width: 50px;*/
            /*height: 50px;*/
            /*background-color: #0c60ee;*/
            /*transform: scale(2) rotate(15deg) rotateX(20deg) rotateY(10deg) rotateZ(13deg);*/
        /*}*/
    </style>
</head>
<body>
<input type="range" min="1" max="200" value="100" oninput="scale(this.value)">放大/缩小<br/>
<input type="range" min="0" max="360" value="0" oninput="rotate(this.value)">2D旋转<br/>
<input type="range" min="0" max="360" value="0" oninput="rotateX(this.value)">沿着X轴的3D旋转<br/>
<input type="range" min="0" max="360" value="0" oninput="rotateY(this.value)">沿着Y轴的3D旋转<br/>
<input type="range" min="0" max="360" value="0" oninput="rotateZ(this.value)">沿着Z轴的3D旋转<br/>

<div id="test"></div>
<script>
    /**
     * 获取元素css最终渲染的值
     * @param element dom元素
     * @param attr 想要获取的属性名称
     * @returns {*}
     */
    function getFinStyle(element, attr) { //
        if (element.currentStyle) { //IE
            return element.currentStyle[attr];
        } else { //非IE
            return window.getComputedStyle(element, null)[attr];
        }
    }

    var obj = document.getElementById("test");

    function scale(d) { //改变缩放系数
        d = d / 100;
        obj.style.setProperty("--scale", d);
    }

    function rotate(d) { //改变2D旋转角度
        obj.style.setProperty("--rotate", d + "deg");
    }

    function rotateX(d) { //改变3D X轴旋转角度
        obj.style.setProperty("--rotateX", d + "deg");
    }

    function rotateY(d) { //改变3D Y轴旋转角度
        obj.style.setProperty("--rotateY", d + "deg");
    }

    function rotateZ(d) { //改变3D Z轴旋转角度
        obj.style.setProperty("--rotateZ", d + "deg");
    }

</script>

</body>
</html>